import React from 'react';

import ReactEcharts from 'echarts-for-react';
import { PieProps } from '../chart.interface';

export class CircularChart extends React.Component<PieProps, {}> {
  static defaultProps = {
    showLegend: true,
    categories: [],
    series: [],
  };

  constructor(props: PieProps) {
    super(props);
  }

  prepareOption = (): any => {
    const { categories, series, showLegend } = this.props;

    const option = {
      color: ['rgb(128,215,250)', 'rgb(67,149,232)', 'rgb(30,69,121)', 'rgb(23,50,96)'],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: {
        show: showLegend,
        orient: 'vertical',
        top: 'middle',
        textStyle: {
          color: '#fff',
        },
        left: 10,
        data: categories,
        formatter: (name: string) => {
          const s = series?.find(s => s.name === name);
          return `${name} ${s?.value}`;
        },
      },
      series: [
        {
          type: 'pie',
          center: ['60%', '50%'],
          radius: ['68px', '74px'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: series,
        },
      ],
    };
    return option;
  };

  render() {
    return (
      <ReactEcharts option={...this.prepareOption()} style={{ height: '200px', width: '400px' }} />
    );
  }
}
